//专题详情列表组件，专题详情页的左侧列表组件
<template>
  <div class="topic-container">
    <!-- 标题 -->
    <h1 class="title" >{{ categoryDetail.name }}</h1>
    <p class="meta" :title="'最后编辑于'+categoryDetail.created_date">{{ categoryDetail.created_date }} 文章数量: {{ categoryDetail.article_count }}</p>

    <!-- 专题简介 -->
    <div class="introduction">
      <h2>专题简介</h2>
      <p>{{ categoryDetail.description }}</p>
    </div>

    <!-- 实战经验 -->
    <div class="experiences" v-for="group in articles" :key="group.topic">
      <h2 class="experiences-title">{{ group.topic || '拓展' }}</h2>
      <ul v-for="article in group.articles" :key=" article.published_date">
        <li>
          <router-link :to="{ name: 'article-detail', params: { id: article.id } }">{{ article.publish_date }}<b></b>{{ article.title }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const router = useRouter();
const route = useRoute();


// 分类详情数据
const categoryDetail = ref({});
// 文章列表数据
const articles = ref([]);

// 获取文章列表,并按专题分类
// 获取文章列表,并按专题分类
const fetchArticles = async () => {
  try {
    const response = await axios.get(`/api/cms/categories/${route.params.id}/get_articles/`);

    // 使用reduce按topic字段分组
    const grouped = response.data.results.reduce((acc, article) => {
       const topic = article.topic_name?.trim() || '';
      const articleData = {
        id: article.id,
        title: article.title,
        publish_date: article.publish_date,
      };

      acc[topic] = acc[topic] || { topic, articles: [] };
      acc[topic].articles.push(articleData);
      return acc;
    }, {});

    // 过滤空分组并排序
    articles.value = Object.values(grouped)
      .filter(group => group.articles.length > 0)
      .sort((a, b) => a.topic.localeCompare(b.topic));

  } catch (error) {
    console.error('获取文章列表失败:', error);
    articles.value = []; // 确保错误时清空数据
  }
};

// 获取分类详情
const fetchCategoryDetail = async () => {
  try {
    const response = await axios.get(`/api/cms/categories/${route.params.id}/`);
    categoryDetail.value = response.data;
    await router.push({
      name: 'subject-detail',
      params: {id: route.params.id},
      query: {title: categoryDetail.value.name}
    });
  } catch (error) {
    console.error('获取分类详情失败:', error);
  }
};
// 页面加载完成后获取数据
onMounted(() => {
  fetchCategoryDetail();
  fetchArticles();
});

</script>

<style scoped>
.topic-container {
  margin: 15px auto 1rem auto;
  padding: 1rem;
  height: 100vh;
  background-color: var(--card-bg-color,#fff);
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* 标题样式 */
.title {
  font-size: 1.4rem;
  color: #17a2b8;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75rem;
}

.meta {
  text-align: center;
  color: #666;
  margin:0 .5rem;
}

/* 专题简介样式 */
.introduction {
  background-color: #eef6fd;
  padding: 1.2rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.introduction h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #004085;
  border-bottom: 1px solid #007bff;
}
.introduction p {
  margin: 0 1rem;
   color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

/* 实战经验样式 */
.experiences {
  margin:auto 0;
}

.experiences-title {
  color: #17a2b8;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: inherit;
}
.experiences-title:before {
  content: "";
  display: inline-block;
  width:.6rem;
  height: .6rem;
  top: 0.1rem;
  position: relative;
  margin-right: 0.5rem;
  background-color: #fff;
  border: 3px solid #228e6c;
  border-radius: 50%;

}

.experiences ul {
  list-style: none;
  padding-left: .5rem !important;
}

.experiences li {
  margin-left: 0.5rem;
  display: list-item;
  text-align: -webkit-match-parent;
  unicode-bidi: isolate;
  position: relative;
  padding-left: 1.2rem;
  line-height: 1.8;
}

  .experiences li a {
    color: var(--card-content-color,#666);
    text-decoration: none;
    background-color: transparent;
    margin-left: 1rem;
    align-items: center;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 500;
  }
  .experiences li a:hover {
    color: #ea6f5a;
  }
  .experiences li a b {
    margin-left: 1rem;
  }
</style>

